<template>
  <view class="evaluate-list">
    <view class="item u-p-20" v-for="(item, index) in evaluate_list" :key="index">
      <view class="flex-between u-m-b-24">
        <view class="flex-row u-flex-1">
          <image class="head" :src="item.member_headimg" mode="aspectFill"></image>
          <view class="df fdc u-flex-1 font-24">
            <view class="u-line-1 w-300">
              {{ item.member_name }}
            </view>
            <text class="light-color">{{
              $u.timeFormat(item.create_time, 'yyyy-mm-dd hh:MM')
            }}</text>
          </view>
        </view>
        <u-rate :disabled="true" :count="item.scores" :value="item.scores"></u-rate>
      </view>
      <text class="font-28 lh-40">{{ item.content }}</text>
      <view v-if="isListNone(item.images)">
        <image
          @click.stop="previewImage(v, item.images)"
          class="pic"
          :src="v"
          :key="i"
          mode="aspectFill"
          v-for="(v, i) in item.images"
        ></image>
      </view>
      <view class="font-20 light-color u-m-t-10">{{ item.sku_name }}</view>
    </view>
  </view>
</template>

<script>
  /**
   * 评价
   */
  export default {
    data() {
      return {
        evaluate_list: [],
      }
    },

    props: {
      list: {
        type: Array,
        default: () => [],
      },
    },
    watch: {
      list: {
        handler(val) {
          if (val.length) {
            val.map((item) => {
              item.images = item.images ? item.images.split(',') : []
            })
            this.evaluate_list = val
          }
        },
        immediate: true,
      },
    },
    methods: {},
  }
</script>

<style lang="scss">
  .evaluate-list {
    .item {
      margin-bottom: 30rpx;
      box-shadow: 0 4rpx 40rpx 0 rgba(0, 0, 0, 0.05);

      &:last-child {
        margin-bottom: 0;
      }
    }

    .head {
      width: 80rpx;
      height: 80rpx;
      margin-right: 24rpx;
      border-radius: 50%;
    }

    .name {
      width: 100rpx;
    }

    .pic {
      width: 120rpx;
      height: 120rpx;
      margin-top: 20rpx;
      margin-right: 24rpx;
    }
  }
</style>
